import { useEffect } from "react";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as CANNON from "cannon-es";
function App() {
  useEffect(() => {
    // 创建世界
    const scene = new THREE.Scene();
    // 创建相机
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    // 设置相机位置
    camera.position.z = 20;
    camera.position.x = 0;
    camera.position.y = 0;

    // 创建物理世界
    const world = new CANNON.World();
    // 设置重力
    world.gravity.set(0, -9.82, 0); // m/s²

    // 添加圆球
    const sphereShape = new CANNON.Sphere(1);
    const sphereBody = new CANNON.Body({
      mass: 100, // 质量
      position: new CANNON.Vec3(0, 20.5, 0), // 初始位置
    });
    sphereBody.addShape(sphereShape);
    world.addBody(sphereBody);
    // 添加地面
    const groundShape = new CANNON.Box(new CANNON.Vec3(10, 0.1, 10));
    const groundBody = new CANNON.Body({
      mass: 0, // 质量为0表示静止物体
      position: new CANNON.Vec3(0, -1, 0), // 初始位置
    });
    groundBody.addShape(groundShape);
    world.addBody(groundBody);
    // groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), 0.1); // 旋转角度

    // 创建圆球
    const geometry = new THREE.SphereGeometry(1, 32, 32);
    // 创建材质
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    // 创建网格
    const cube = new THREE.Mesh(geometry, material);
    // 将网格添加到场景中
    scene.add(cube);

    // 创建平面
    const planeShape = new THREE.BoxGeometry(10, 0.1, 10);
    const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
    const plane = new THREE.Mesh(planeShape, planeMaterial);
    // 设置平面位置
    plane.position.y = -1;
    // plane.rotation.x = 0.1; // 旋转平面
    // 将平面添加到场景中
    scene.add(plane);

    // 添加圆球
    let sphereBody1 = null;
    let cube1 = null;
    let groundBody1 = null;
    {
      const sphereShape = new CANNON.Sphere(2);
      const sphereBody = new CANNON.Body({
        mass: 1, // 质量
        position: new CANNON.Vec3(3, 21, 0), // 初始位置
      });
      sphereBody.addShape(sphereShape);
      world.addBody(sphereBody);
      sphereBody1 = sphereBody;

      // 创建圆球
      const geometry = new THREE.SphereGeometry(2, 32, 32);
      // 创建材质
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      // 创建网格
      const cube = new THREE.Mesh(geometry, material);
      // 将网格添加到场景中
      scene.add(cube);
      cube1 = cube;

      // 添加地面
      const groundShape = new CANNON.Box(new CANNON.Vec3(10, 0.1, 10));
      const groundBody = new CANNON.Body({
        mass: 0, // 质量为0表示静止物体
        position: new CANNON.Vec3(0, 19, 0), // 初始位置
      });
      groundBody.addShape(groundShape);
      groundBody1 = groundBody;
      world.addBody(groundBody);

      window.addEventListener("click", () => {
        world.removeBody(groundBody1);
      })
    }

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 将渲染器添加到DOM中
    document.getElementById("app").appendChild(renderer.domElement);

    // 添加轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.target.set(0, 5, 0); // 设置轨道控制器的目标点

    // 创建动画函数
    const animate = function () {
      // 更新物理世界
      world.step(1 / 60); // 60fps
      // 更新圆球位置
      cube.position.copy(sphereBody.position);
      cube.quaternion.copy(sphereBody.quaternion);
      cube1.position.copy(sphereBody1.position);
      cube1.quaternion.copy(sphereBody1.quaternion);
      // 更新轨道控制器
      controls.update();

      requestAnimationFrame(animate);

      // 渲染场景
      renderer.render(scene, camera);
    };
    // 调用动画函数
    animate();

    return () => {
      // 清除渲染器
      renderer.dispose();
      // 清除场景
      scene.clear();
      // 清除相机
      camera.clear();
      // 清除渲染器DOM
      const app = document.getElementById("app");
      if (app) {
        app.removeChild(renderer.domElement);
      }
    };
  }, []);
  return <div id="app"></div>;
}

export default App;
